import React, { useState } from 'react';
import { Form, Input, Select, Checkbox, Space, Divider, Button } from 'antd';
import { useCurrentNode } from '@/hooks/useCurrentNode';
import { useNodesData } from '@xyflow/react';

const { Option } = Select;

const AddUnionField = ({ allColumns, onSubmit, onClose }) => {
  const [form] = Form.useForm();
  const [useConnector, setUseConnector] = useState(false);
  const [connectorType, setConnectorType] = useState('Comma');

  const concatOptions = [
    {
      label: '逗号',
      value: 'Comma'
    },
    {
      label: '分号',
      value: 'Semicolon'
    },
    {
      label: '空格',
      value: 'Space'
    },
    {
      label: '自定义',
      value: 'Custom'
    }
  ];

  const handleSubmit = (values) => {
    onSubmit?.(values);
    onClose?.()
  };

  const handleConnectorTypeChange = (value) => {
    setConnectorType(value);
    // 当从自定义切换回其他选项时，清除自定义连接符的值
    if (value !== 'Custom') {
      form.setFieldsValue({ customConnector: undefined });
    }
  };

  return (
    <Form
      form={form}
      layout="vertical"
      onFinish={handleSubmit}
      initialValues={{
        useConnector: false,
        connectorType: 'Comma',
      }}
    >
      <Form.Item
        label="新建字段名称"
        name="newFieldName"
        rules={[
          { required: true, message: '请输入新字段名称' },
          { pattern: /^[a-zA-Z_][a-zA-Z0-9_]*$/, message: '字段名只能包含字母、数字和下划线，且不能以数字开头' }
        ]}
      >
        <Input placeholder="请输入合并后的新字段名称" />
      </Form.Item>

      <Form.Item
        label="选择要合并的字段"
        name="fieldsToMerge"
        rules={[{ required: true, message: '请至少选择一个字段', type: 'array' }]}
      >
        <Select
          mode="multiple"
          placeholder="请选择要合并的字段"
          showSearch
          allowClear
          filterOption={(input, option) =>
            (option?.label ?? '').toLowerCase().includes(input.toLowerCase())
          }
          options={allColumns}
        >
        </Select>
      </Form.Item>

      <Form.Item label="连接符设置" style={{ marginBottom: 0 }}>
        <Space align="start" size={16}>
          <Form.Item name="useConnector" valuePropName="checked" style={{ marginBottom: 0 }}>
            <Checkbox onChange={e => setUseConnector(e.target.checked)}>启用连接符</Checkbox>
          </Form.Item>

          {useConnector && (
            <>
              <Form.Item
                name="connectorType"
                style={{ marginBottom: 0, width: 120 }}
              >
                <Select
                  options={concatOptions}
                  onChange={handleConnectorTypeChange}
                />
              </Form.Item>

              {connectorType === 'Custom' && (
                <Form.Item
                  name="customConnector"
                  style={{ marginBottom: 0, width: 120 }}
                  rules={[
                    {
                      required: true,
                      message: '请输入连接符'
                    }
                  ]}
                >
                  <Input placeholder="自定义连接符" />
                </Form.Item>
              )}
            </>
          )}
        </Space>

      </Form.Item>
      <Divider />
      <Form.Item style={{ display: 'flex', justifyContent: 'flex-end' }}>
        <Space>
          <Button onClick={onClose}>取消</Button>
          <Button type='primary' htmlType='submit'>确定</Button>
        </Space>
      </Form.Item>
    </Form>
  );
};

export default AddUnionField;